<template>
	<view class="binding">
		<view class="top">
			<view class="top-item">
				<view class="item-l">
					<input type="text" v-model="phone" placeholder="请输入手机号码"/>
				</view>
				<view class="item-r">
					<button class="sendCode" :class="{'disabled': !codeButton}" @click="getCode" :disabled="!codeButton">{{codeMsg}}</button>
				</view>
				
				<text class="tip">绑定即可赠送7天会员体验特权</text>
			</view>
			<view class="top-item">
				<view class="item-l">
					<input type="text" v-model="code" placeholder="请输入验证码"/>
				</view>
			</view>
		</view>
		<button class="bottom" :class="{'active': code !='' && phone != ''}" @click="toBinding">绑定</button>
	</view>
</template>

<script>
	import Api from '../../../util/api.js'
	export default {
		data() {
			return {
				phone:'',
				code:'',
				codeMsg: "获取验证码",
        codeTime: 60,
        codeButton: true,
				timeDao:'',
				recommenderAccountId:'',
			};
		},
		onLoad(option) {
			this.recommenderAccountId = option.recommenderAccountId;
		},
		methods: {
			//获取验证码
			getCode(){
				if(this.phone == ''){
					uni.showToast({
							title: '请输入手机号',
							icon: 'none',
							duration: 2000
					});
					return false;
				}
				if(this.phone.length != 11){
					uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none',
							duration: 2000
					});
					return false;
				}
				Api.fetchPost('/fsbus/M2300',{phone: this.phone}).then(res=>{
					if(res.errorNo == 0){
						this.timeCount();
					}
				}).catch(err=>{})
			},
			timeCount() {
        var self = this;
        self.timeDao = setInterval(function () {
          if (self.codeTime < 1) {
            self.codeButton = true;
            self.codeMsg = "重新发送"
            clearInterval(self.timeDao);
            self.codeTime = 60;
          } else {
            self.codeButton = false;
            self.codeTime--;
            self.codeMsg = self.codeTime + 's'
          }
        }, 1000)
      },
			toBinding(){
				if(this.phone == ''){
					uni.showToast({
							title: '请输入手机号',
							icon: 'none',
							duration: 2000
					});
					return false;
				}
				if(this.code == ''){
					uni.showToast({
							title: '请输入验证码',
							icon: 'none',
							duration: 2000
					});
					return false;
				}
				
				Api.fetchPost('/account/bindPhone',{
					phone: this.phone,
					verificationCode: this.code
				}).then(res=>{
					if(res.errorNo == 0){
						if(this.recommenderAccountId == ''){
							uni.redirectTo({
									url: '/pages/login/relation/relation'
							});
						}else {
							uni.reLaunch({url:'/pages/login/login/login'})
						}
					}
				}).catch(err=>{})
			},
		}
	}
</script>

<style>
.binding {
	width: 100%;
	min-height: 100%;
	background-color: #f3f3f3;
	position: absolute;
	font-size: 24upx;
}
.top {
	background-color: #fff;
	padding: 30upx;
}
.top-item {
	height: 100upx;
	line-height: 100upx;
	display: flex;
	position: relative;
}
.top-item:first-child {
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 60upx;
}

.tip {
	position: absolute;
	bottom: -70upx;
	background-color: #F52A4C;
	height: 53upx;
	line-height: 53upx;
	color: #fff;
	padding: 0 20upx;
	border-radius: 6upx;
}
.tip:before {
	content: '';
	width: 0;
	height:0;
	border-left:10upx solid transparent;
	border-bottom: 10upx solid #F52A4C;
	border-right: 10upx solid  transparent ;
	position: absolute;
	left: 30upx;
	top: -10upx;
}

.item-l {
	flex: 1;
}
.item-l input {
	width: 100%;
	height: 100upx;
	line-height: 100upx;
	font-size: 34upx;
}
.item-r {
	width:180upx ;
}
.item-r .sendCode {
	width: 180upx;
	font-size: 26upx;
	background-color: #555;
	height: 56upx;
	line-height: 56upx;
	color: #fff;
	margin-top: 22upx;
	padding: 0;
}
.item-r .sendCode.disabled {
	background-color: #999;
	opacity: .5;
}
.bottom {
	width: 100%;
	height: 120upx;
	line-height: 120upx;
	background-color: #999999;
	border-radius: 0;
	position: absolute;
	bottom: 0;
	opacity: .5;
	color: #fff;
	font-size: 30upx;
}
.bottom.active {
	background-color: #F52A4C;
	opacity: 1;
}
</style>
